import React, { Component } from 'react';
import './Comment.css'

class Comment extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      content: '',
      list: []
    }
  }
  changeName(e) {
    this.setState({
      name: e.target.value
    })
  }
  changeContent(e) {
    this.setState({
      content: e.target.value
    })
  }
  submit() {
    // 提交评论
    let arr = this.state.list;
    arr.push({
      name: this.state.name,
      content: this.state.content
    });
    this.setState({
      list: arr,
      name: '',
      content: ''
    })
  }
  del(index) {
    let arr = this.state.list;
    arr.splice(index, 1);
    this.setState({
      list: arr
    })
  }
  render() {
    return (
      <div>
        <h1>留言板</h1>
        <div className="content">
          <input placeholder="请输入昵称" value={this.state.name} onChange={(e)=>this.changeName(e)}></input>
          <br></br>
          <input placeholder="请输入内容" value={this.state.content} onChange={(e)=>this.changeContent(e)}></input>
          <br></br>
          <button className="btn" onClick={()=>this.submit()}>submit</button>
        </div>
        <hr />
        <div>
          {
            this.state.list.map((item,index) => {
              return (
                <div key={index} className={index%2?'green':'blue'}>
                  <p>昵称：{item.name}</p>
                  <p>内容：{item.content}</p>
                  <button onClick={()=>this.del(index)}>del</button>
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default Comment;
